<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
<style>
.fu{
  position: relative;
  background: skyblue;
  width: 500px;
  height: 500px;
  /* display: flex;
  justify-content: center;
  align-items: center; */
}
.div1{
  background:red;
  position:absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
}
.div2{
  background: green;
  width: 50px;
  position:absolute;
  top:50%;
  left:50%;
  margin-top: -25px;
  margin-left: -25px;
}
.div3{
  width: 70px;
    height: 25px;
    background: yellow;
    position:absolute;
    left:0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
</style>
<body>
  <div class="fu">
    <div class="div1">
        1233
    </div>
    <div class="div2">
      123333
    </div>
    <div class="div3">
      12333344
    </div>
    <div class="div4">
      55555555555555555555555555555
    </div>
  </div>
  </body>
</html>